<template>
  <div id="home">
    <div>
      <img src="../assets/img/home-scut.png" alt="华南理工大学"
           style="vertical-align: bottom; width: 100%; min-width: 1500px">
    </div>

    <div id="main-div">
      <div class="center-div" style="height: 460px; margin-top: 10px; margin-bottom: 10px; display: block">
        <div class="main-show">
          <div style="padding-top: 40px; display: flex">
            <div class="blueStrip"></div>
            <span style="font-size:18px; line-height: 20px">更改顾客贷款金额</span>
          </div>

          <div style="margin-top: 30px">
            <Form :model="updateForm" :label-width="100" style="width: 480px; margin: 0 auto" show-message>
              <FormItem label="银行ID" required>
                <Input v-model="updateForm.bankID" v-bind:disabled="this.disabled"/>
              </FormItem>
              <FormItem label="顾客ID" required>
                <Input v-model="updateForm.customerID" placeholder="请输入要更改的顾客对应的唯一ID..."/>
              </FormItem>
              <FormItem label="修改金额" required>
                <Input v-model="updateForm.amount" placeholder="请输入要存储的金额..." type="number"/>
              </FormItem>

              <FormItem>
                <Button type="primary" @click="update">修改</Button>
                <Button style="margin-left: 8px" @click="clearUpdateForm">清空</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>

      <div class="center-div" style="height: 460px; margin-top: 10px;display: block">
        <div class="main-show">
          <div style="padding-top: 40px; display: flex">
            <div class="blueStrip"></div>
            <span style="font-size:18px; line-height: 20px">验证顾客在银行联盟中的总贷款金额</span>
          </div>

          <div style="margin-top: 30px">
            <Form :model="verifyForm" :label-width="100" style="width: 480px; margin: 0 auto" show-message>
              <FormItem label="顾客ID" required>
                <Input v-model="verifyForm.customerID" placeholder="请输入要验证总额顾客对应的唯一ID..."/>
              </FormItem>
              <FormItem label="验证金额" required>
                <Input v-model="verifyForm.amount" placeholder="请输入要验证的金额..." type="number"/>
              </FormItem>

              <FormItem>
                <Button type="primary" @click="verify">验证</Button>
                <Button style="margin-left: 8px" @click="clearVerifyForm">清空</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Home",
    components: {},
    data() {
      return {
        updateForm: {
          bankID: this.$store.state.account,
          customerID: '',
          amount: null
        },
        verifyForm: {
          customerID: '',
          amount: null
        },
        disabled: true
      }
    },
    methods: {
      update() {
        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('Icon', {
                'class': 'demo-spin-icon-load',
                props: {
                  type: 'ios-loading',
                  size: 18
                }
              }),
              h('div', 'Loading')
            ])
          }
        });
        setTimeout(() => {
          this.$Spin.hide();
          this.$http.post('/update/', this.qs.stringify({
            bankID: this.updateForm.bankID,
            customerID: this.updateForm.customerID,
            amount: this.updateForm.amount
          })).then(res => {
            console.log(res)
            if (res.data.code === 1) {
              this.$Message.success("修改顾客贷款金额成功")
            } else {
              this.$Message.error(res.data.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }, 500);
      },
      clearUpdateForm() {
        this.updateForm.customerID = ''
        this.updateForm.amount = null
      },
      verify() {
        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('Icon', {
                'class': 'demo-spin-icon-load',
                props: {
                  type: 'ios-loading',
                  size: 18
                }
              }),
              h('div', 'Loading')
            ])
          }
        });
        setTimeout(() => {
          this.$Spin.hide();
          this.$http.post('/verify/', this.qs.stringify({
            customerID: this.verifyForm.customerID,
            amount: this.verifyForm.amount
          })).then(res => {
            console.log(res)
            if (res.data.code === 1) {
              this.$Message.success("顾客提供验证的贷款金额是正确的！")
            } else {
              this.$Message.error(res.data.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }, 500)

      },
      clearVerifyForm() {
        this.verifyForm.customerID = ''
        this.verifyForm.amount = null
      }
    },
    created() {

    },
    mounted() {
    }
  }
</script>

<style scoped>
  #home {
    color: rgba(51, 51, 51, 1);
  }

  #main-div {
    background-color: #EEF1F9;
    width: 100%;
    margin-top: -10px;
  }

  .center-div {
    width: 1200px;
    margin: 0 auto;
    background-color: white;
    display: flex;
    transform: translate(0, -50px);
  }

  .main-show {
    width: 1120px;
    margin: auto;
  }

  #ex-information div {
    height: 100%;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 33px;
  }

  .blueStrip {
    width: 4px;
    height: 20px;
    background: rgba(0, 70, 140, 1);
    border-radius: 1px;
    margin-right: 5px;
  }
</style>
